<template>
  <div class="dialog">
    <el-dialog title="新增员工" :visible="isShow" @close="cancle">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" label-width="100px" prop="username">
          <el-input v-model.trim="form.username" />
        </el-form-item>
        <el-form-item label="手机" label-width="100px" prop="mobile">
          <el-input v-model.trim="form.mobile" />
        </el-form-item>
        <el-form-item label="入职时间" label-width="100px" prop="timeOfEntry">
          <el-date-picker v-model="form.timeOfEntry" />
        </el-form-item>
        <!-- 聘用形式数据渲染 -->
        <el-form-item label="聘用形式" label-width="100px" prop="formOfEmployment">
          <el-select v-model.trim="form.formOfEmployment">
            <el-option v-for="item in employees.hireType" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="工号" label-width="100px" prop="workNumber">
          <el-input v-model.trim="form.workNumber" />
        </el-form-item>
        <el-form-item label="部门" label-width="100px" prop="departmentName">
          <!-- 自定义指令关闭树形结构 -->
          <div v-outClick="outClick">
            <!-- 当输入框获取焦点的时候就调用api请求接口数据 -->
            <el-input v-model="form.departmentName" readonly @focus="eventFocus" />
            <el-tree
              v-if="treeShow"
              :data="data"
              :props="{label:'name'}"
              @node-click="treeClick"
            />
          </div>
        </el-form-item>
        <el-form-item label="转正时间" label-width="100px" prop="correctionTime">
          <el-date-picker v-model="form.correctionTime" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="btn" style="text-align:center">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancle">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import employees from '@/api/constant/employees.js'
import { companydepartment } from '@/api/deparments.js'
import { sysuserPost } from '@/api/employees.js'
// 导入公共的验证手机规则
import { validateMoblie } from '@/utils/validate.js'
export default {
  data() {
    return {
      isShow: false,
      treeShow: false,
      employees,
      form: {
        username: '',	// string	非必须		姓名
        mobile: '',	// string	非必须		手机号
        formOfEmployment: '',	// number	非必须		聘用形式
        workNumber: '',	// string	非必须		工号
        departmentName: '',	// string	非必须		组织名称
        timeOfEntry: '',	// string	非必须		入职时间
        correctionTime: ''	// string	非必须		转正时间
      },
      rules: {
        username: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位数字', trigger: 'blur' },
          //   自定义验证规则
          { validator: (rules, value, callback) => {
            validateMoblie(value) ? callback() : callback(new Error('请输入正确手机号'))
          }, trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        timeOfEntry: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      data: []
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // 调用api接口请求保存新增数据
        //   关闭弹窗，清空表单数据和验证规则
        // 刷新父级页面
          await sysuserPost(this.form)
          // 关闭弹窗
          this.cancle()
          // 刷新父级页面
          this.$parent.getEmployeeList()
          this.$message.success('新增成功')
        }
      })
    },
    //   自定义指令--当符合自定义指令时执行此函数
    outClick() {
      this.treeShow = false
    },
    //   点击树形结构中每一项给输入框赋值，同时关闭属性框
    treeClick(data) {
      this.form.departmentName = data.introduce
      this.treeShow = false
    },
    //   关闭弹窗
    cancle() {
      this.isShow = false
      // 清空输入框数据和验证规则
      this.$refs.form.resetFields()
      this.form = {
        username: '',	// string	非必须		姓名
        mobile: '',	// string	非必须		手机号
        formOfEmployment: '',	// number	非必须		聘用形式
        workNumber: '',	// string	非必须		工号
        departmentName: '',	// string	非必须		组织名称
        timeOfEntry: '',	// string	非必须		入职时间
        correctionTime: ''	// string	非必须		转正时间
      }
    },
    // 输入框获得焦点请求数据
    async eventFocus() {
      this.treeShow = true
      //   判断树形是否已经存在数据，如果已经存在数据就不发送请求
      if (this.data.length === 0) {
        const res = await companydepartment()
        this.data = this.treeDate(res.data.depts, '')
        //   console.log(res)
      }
    },
    treeDate(arr, props) {
      return arr.filter(item => {
        if (item.pid === props) {
          item.children = this.treeDate(arr, item.id)
          return true
        }
      })
    }
  }

}
</script>

<style>

</style>
